<template>
	<!-- 物料出入库导出页面 -->
  <a-card :bordered="false">
		<!-- 顶部筛选 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" labelAlign="right">
        <a-row :gutter="48">
          <!-- <a-col :md="8" :sm="24">
            <a-form-item label="发货单号">
              <a-input v-model="queryParam.orderNumber" placeholder="请输入发货单号"/>
            </a-form-item>
          </a-col> -->
					<a-col :md="8" :sm="24">
            <a-form-item label="选择时间">
              <a-range-picker
                style="width:100%"
                v-model="queryParam.timeList"
                format="YYYY-MM-DD"
							/>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            </span>
          </a-col> -->
					<a-col :md="24" :sm="24">
            <a-form-item label="成品类型">
              <a-radio-group default-value="" button-style="solid" v-model="queryParam.materialType">
                <a-radio-button
									:value="id"
                  v-for="{id, name} in [this.$businessEnum.MATERIAL_TYPE_ENUM.product, this.$businessEnum.MATERIAL_TYPE_ENUM.overseasProduct]"
									:key="id"
								>
                  {{ name }}
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="24" :sm="24">
            <a-form-item label="供  应  商">
              <a-radio-group default-value="" button-style="solid" v-model="queryParam.orgIdSupplier">
                <a-radio-button value="">
                  全部
                </a-radio-button>
                <a-radio-button 
									:value="id"
                  v-for="{id, name} in $util.getOrgList([this.$businessEnum.ORG_TYPE_ENUM.PRIMARY_SUPPLIER.id, this.$businessEnum.ORG_TYPE_ENUM.NORMAL_SUPPLIER.id])"
									:key="id"
								>
                  {{ name }}
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col> -->

          <a-col :md="24" :sm="24">
            <a-form-item label="归属公司">
              <a-radio-group default-value="" button-style="solid" v-model="queryParam.orgIdCompany">
                <a-radio-button value="">
                  全部
                </a-radio-button>
                <a-radio-button 
									:value="id" 
									v-for="{id, name} in $util.getOrgList($businessEnum.ORG_TYPE_ENUM.COMPANY.id)"
									:key="id"
								>
                  {{ name }}
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
					<a-col :md="24" :sm="24">
						<div style="width: 100%;display: flex;justify-content: space-around;">
							<Export
								text="入库明细导出"
								type="default"
								style="background-color: #f0aa13;color: #fff;font-size: 16px;height: 40px;width: 155px;"
								title="入库明细表"
								url="/emsMaterialExportRecord/warehousingExport"
								:obj="{
                  classType: 2,  //1物料  2成品、海外仓
									orgIdSupplier: queryParam.orgIdSupplier,
									orgIdCompany: queryParam.orgIdCompany,
									materialType: queryParam.materialType,
									startTime: appendTime(queryParam.timeList)[0],
									endTime: appendTime(queryParam.timeList)[1],
								}"
								@ok="$refs.table.refresh()"
							/>
							<Export
								text="出库明细导出"
								type="primary"
								style="background-color: #139ff0;color: #fff;font-size: 16px;;height: 40px;width:155px;"
								title="出库明细表"
								url="/emsMaterialExportRecord/outboundExport"
								:obj="{
                  classType: 2,  //1物料  2成品、海外仓
									orgIdSupplier: queryParam.orgIdSupplier,
									orgIdCompany: queryParam.orgIdCompany,
									materialType: queryParam.materialType,
									startTime: appendTime(queryParam.timeList)[0],
									endTime: appendTime(queryParam.timeList)[1],
								}"
								@ok="$refs.table.refresh()"
							/>
						</div>
					</a-col>

        </a-row>
      </a-form>
    </div>
		<!-- 表格 -->
    <s-table
      ref="table"
			style="margin-top: 15px;"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="true"
    >
			<!-- 详情 -->
			<!-- <span slot="orgName" slot-scope="text, record">
        <span>{{ '这是详情的内容' }}</span> <br>
        <span>{{ '这是详情的内容' }}</span> <br>
        <span>{{ '这是详情的内容' }}</span> <br>
      </span> -->
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" icon="download" :disabled="!record.url">
					<a :style="{color: record.url ? '#fff' : '#cbb8d7'}" :href="`${$store.state.baseUrl}/sysFileInfo/preview?id=${record.url}`">下载</a>
				</a-button>
				<a-popconfirm placement="topRight" title="确认删除？" @confirm="() => handleDelete(record)">
					<a-button type="danger" icon="delete">删除</a-button>
				</a-popconfirm>
      </span>
    </s-table>

  </a-card>
</template>

<script>
import {STable} from '@/components'
import {page, del} from '@/api/modular/main/materialExport'
       

export default {
  components: {
    STable,
  },
  mounted(){
    console.log('@@@@', process)
  },
  data() {
    return {
      queryParam: {
        materialType: this.$businessEnum.MATERIAL_TYPE_ENUM.product.id
      },  // 查询参数
      columns: [
        {
          title: '序号',
          width: '80px',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '时间',
          dataIndex: 'createTime'
        },
        {
          title: '类型',
          dataIndex: 'type',
					customRender: (text, record, index) => {
						return text == 1 ? '入库' : text == 2 ? '出库' : '--'
					}
        },
        // {
        //   title: '详情',
        //   dataIndex: 'orgName',
				// 	scopedSlots: {customRender: 'orgName'}
        // },
        {
          title: '操作',
					align:'center',
          width: '250px',
          scopedSlots: {customRender: 'action'}
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
				let query = {
					// ...this.queryParam,
					...parameter,
          classType: 2,  //1物料  2成品、海外仓
					// orderType: this.orderType,
					// startTime: this.appendTime(this.queryParam.timeList)[0],
					// endTime: this.appendTime(this.queryParam.timeList)[1],
				}
				// delete query.timeList
        return page(query).then((res) => {
          return res.data
        })
      },
      scheduleProductionVisible: false,
      selectedRowKeys: [],
      selectedRows: [],
      defaultExpandedKeys: [],
      replaceFields: {
        key: 'id',
      },
    }
  },
  methods: {
		handleDownload(url){
			if(!url) {
				return this.$message.error('下载地址为空')
			}
			this.download(url, `${this.title}_${this.dayjs(new Date()).format('YYYY/MM/DD HH:mm:ss')}.xls`).then(res => {
        return this.$message.success('下载成功')
      })
		},
		handleDelete(row){
			del({id: row.id}).then(res => {
				this.$message.success('删除成功')
				this.$refs.table.refresh()
			})
		},
    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
  }
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
